/* fade */
.fade-in-enter-active,
.fade-out-leave-active {
  transition: opacity var(--transition-time, .2s);
  transition-timing-function: linear;
}

.fade-in-enter-from,
.fade-out-leave-to {
  opacity: 0;
}

/* fade-up */
.fade-in-up-enter-active,
.fade-out-up-leave-active {
  transition: opacity var(--transition-time, .2s), transform var(--transition-time, .2s);
}

.fade-in-up-enter-from {
  opacity: 0;
  transform: translateY(50%);
}

.fade-out-up-leave-to {
  opacity: 0;
  transform: translateY(-50%);
}

/* fade-down */
.fade-in-down-enter-active,
.fade-out-down-leave-active {
  transition: opacity var(--transition-time, .2s), transform var(--transition-time, .2s);
}

.fade-in-down-enter-from {
  opacity: 0;
  transform: translateY(-50%);
}

.fade-out-down-leave-to {
  opacity: 0;
  transform: translateY(50%);
}

/* fade-left */
.fade-in-left-enter-active,
.fade-out-left-leave-active {
  transition: opacity var(--transition-time, .2s), transform var(--transition-time, .2s);
}

.fade-in-left-enter-from {
  opacity: 0;
  transform: translateX(50%);
}

.fade-out-left-leave-to {
  opacity: 0;
  transform: translateX(-50%);
}

/* fade-right */
.fade-in-right-enter-active,
.fade-out-right-leave-active {
  transition: opacity var(--transition-time, .2s), transform var(--transition-time, .2s);
}

.fade-in-right-enter-from {
  opacity: 0;
  transform: translateX(-50%);
}

.fade-out-right-leave-to {
  opacity: 0;
  transform: translateX(50%);
}